<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期选择器</title>
    <% include include/link %>
    <link href="https://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid widget-stage">
    <h1 class="widget-stage-title">Douyou8UI 项目通用组件库</h1>
    <p class="widget-stage-desc">项目中应当抽取公共的部分以及较为复杂的部分作为组件，方便复用。其中按钮，对话框，遮罩层，下拉菜单，选项卡和文本输入6个组件因为每个项目中都基本会使用到，因此已经由框架预先实现。</p>
    <section class="widget-item">
        <div class="widget-item-title">基本日期访问选择器</div>
        <div class="widget-item-cnt">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon"><i class="glyphicon glyphicon-time"></i></div>
                    <input type="text" class="form-control" name="daterange1" />
                </div>
            </div>
        </div>
    </section>
    <section class="widget-item">
        <div class="widget-item-title">基本单日期访问选择器</div>
        <div class="widget-item-cnt">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon"><i class="glyphicon glyphicon-time"></i></div>
                    <input type="text" class="form-control" name="daterange2" />
                </div>
            </div>
        </div>
    </section>
    <section class="widget-item">
        <div class="widget-item-title">日期范围和时间选择器，30分钟增量</div>
        <div class="widget-item-cnt">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon"><i class="glyphicon glyphicon-time"></i></div>
                    <input type="text" class="form-control" name="daterange3" />
                </div>
            </div>
        </div>
    </section>
    <section class="widget-item">
        <div class="widget-item-title">初始为空的日期选择器</div>
        <div class="widget-item-cnt">
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon"><i class="glyphicon glyphicon-time"></i></div>
                    <input type="text" class="form-control" name="daterange4" />
                </div>
            </div>
        </div>
    </section>
</div>
<% include include/footer %>
<script src="https://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/moment.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-daterangepicker/2.1.25/daterangepicker.min.js"></script>
<script>
    var locale = {
        "format": 'YYYY/MM/DD',
        "separator": " - ",
        "applyLabel": "确定",
        "cancelLabel": "取消",
        "fromLabel": "起始时间",
        "toLabel": "结束时间'",
        "customRangeLabel": "自定义",
        "weekLabel": "W",
        "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
        "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        "firstDay": 1
    };
    $('input[name="daterange1"]').daterangepicker({
        locale:locale
    });
    $('input[name="daterange2"]').daterangepicker({
        locale:locale,
        singleDatePicker: true
    });
    $('input[name="daterange3"]').daterangepicker({
        locale:$.extend(locale, {
            format: 'MM/DD/YYYY h:mm A'
        }),
        timePicker: true,
        timePickerIncrement: 30,
        timePicker24Hour: true
    },function(start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
    });
    $('input[name="daterange4"]').daterangepicker({
        locale:$.extend(locale, {
            format: 'MM/DD/YYYY'
        }),
        singleDatePicker: true,
        autoUpdateInput: false
    });
    $('input[name="daterange4"]').on('apply.daterangepicker', function(ev, picker){
        $(this).val(picker.startDate.format('YYYY/MM/DD'));
    });
</script>
</body>
</html>